<template>
  <div>
    <div class="detaiPage">
      <div class="headerline">
        <div class="header bannercenter">
          <div class="headtitle clearfix">
            <h1><span class="title">{{ item.bookName }}</span></h1>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="play" v-show="playVisible">
          <video width="100%" height="100%" controls controlslist="nodownload">
            <source :src="item.fileUrl" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
        <div class="content" v-html="item.content">
        </div>
      </div>
    </div>
    <footer-page/>
  </div>
</template>

<script>
import FooterPage from '@/layout/footer/FooterPage.vue'
import { getBook } from '@/api/teach/book/book'

export default {
  name: 'BookDetaiPage',
  components: {
    FooterPage
  },
  data() {
    return {
      item: null,
      playVisible: false
    }
  },
  created() {
    this.getBookDetail()
  },
  methods: {
    getBookDetail() {
      let id = this.$route.query.id
      this.loading = true
      getBook(id).then(response => {
        this.item = response.data
        this.loading = false
        //验证文件
        this.playVisible = this.isValidMP4Url(this.item.fileUrl)
      })
    },
    isValidMP4Url(url) {
      // 基本URL验证
      try {
        new URL(url)
      } catch (e) {
        return false
      }
      // 提取文件扩展名
      const pathname = new URL(url).pathname
      const extension = pathname.split('.').pop().toLowerCase()

      // 检查是否为mp4扩展名
      return extension === 'mp4'
    }
  }
}
</script>

